<template>
  <div class="container">

    <div class="pro-content">


      <!-- 导航条 -->
      <van-nav-bar fixed title="商品详情页" :left-arrow="true" @click-left="$router.back()" />

      <div v-if="data">

        <!-- 商品图片轮播图 -->
        <div class="banner-swiper">
          <van-swipe class="my-swipe" @change="swipeChange" :autoplay="30000000" :show-indicators="false">

            <van-swipe-item v-for="(item) in data.goods_images" :key="item.file_id">
              <img class="banner-swiper-img" :src="item.external_url" alt="">
            </van-swipe-item>

            <template #indicator>
              <div class="custom-indicator" v-if="data.goods_images">{{ active + 1 }}/{{ data.goods_images.length }}
              </div>
            </template>


          </van-swipe>
        </div>

        <!-- 价格, 数量 -->
        <div class="price-row">
          <div>
            <span class="price-row-min">¥{{ data.goods_price_min }}</span>
            <span class="price-row-max">¥{{ data.goods_price_max }}</span>
          </div>
          <div class="price-row-count">已售{{ data.goods_sales }}件</div>
        </div>

        <!-- 产品名 -->
        <div class="name">{{ data.goods_name }}</div>

        <van-divider />

        <!-- 评论 -->
        <div class="comment" v-if="commentList">
          <div class="comment-title">评论列表</div>
          <div class="comment-item" v-for="item in commentList" :key="item.comment_id">
            <img class="head-img" :src="item.user.avatar_url ?? require('@/assets/head_placehold.jpeg')">
            <div class="item-right">
              <div class="comment-name">
                <span>{{ item.user.nick_name }}</span>
                <van-rate v-model="rateValue" />
              </div>
              <div class="content">{{ item.content }}</div>
              <div class="time">{{ item.create_time }}</div>
            </div>
          </div>

        </div>

        <!-- 商品详情 -->
        <div class="html-content" v-html="data.content">
        </div>

      </div>

    </div>


    <!-- 底部操作菜单 -->
    <div class="bottom-menu">

      <div class="menu-item">
        <img src="@/assets/tabbar/icon_tab_home.png" alt="">
        <div>首页</div>
      </div>

      

      <van-badge :content="cartNum">
        <div class="menu-item" @click="goCart">
          <img src="@/assets/tabbar/icon_tab_cart.png" alt="">
          <div>购物车</div>
        </div>
      </van-badge>


      <div v-if="this.data.stock_total" class="add" @click="addCart(0)">
        加入购物车
      </div>
      <div v-if="this.data.stock_total" class="buy" @click="addCart(1)">
        立即购买
      </div>
      <div v-else class="sale-out">
        商品已售完
      </div>

    </div>

    <van-popup 
      v-model="showPop" 
      close-icon-position="top-left" 
      
      round 
      position="bottom" 
      :style="{ height: '240px' }"
    >
    <ProdetailCart :data="data" @getCartCount="changeCartNum" :type="type" @closeBox="showPop=false"></ProdetailCart>
  </van-popup>


  </div>
</template>

<script>
import { getGoodsComment, getGoodsDetailData } from '@/api';
import ProdetailCart from '@/components/pro/ProdetailCart.vue';

export default {
  name: 'prodetail',
  components:{
    ProdetailCart
  },
  data() {
    return {
      data: {},
      active: 0,
      total: 0,
      commentList: [],
      showPop: false,
      type: 0,
      cartNum: undefined, // 商品购物车角标
    }
  },
  computed: {
    rateValue(){
      return Math.floor(Math.random() * 5);
    }
  },
  created() {
    this.getData(),
      this.getCommentListAsync()
  },

  methods: {
    async getData() {
      const resp = await getGoodsDetailData(this.$route.params.id)
      this.data = resp.data.detail
      console.log(this.data)
    },
    swipeChange(index) {
      this.active = index
    },
    async getCommentListAsync() {
      const resp = await getGoodsComment(this.$route.params.id)
      this.commentList = resp.data.list
    },
    
    addCart(value) {
      this.type = value
      this.showPop = true;
    },
    changeCartNum(value){
       console.log('----' + value)
      this.cartNum = value
    },
    goCart(){
      this.$router.push('/cart')
    }
  }

}
</script>

<style lang="less" scoped>
.container {

  display: flex;
  flex-direction: column;
  // margin-bottom: 50px;
  height: 100vh;

  .pro-content {

    flex: 1;
    overflow-y: auto;
    margin-bottom: 50px;
    /* 只让内容部分滚动 */


    .banner-swiper {
      widows: 100%;
      aspect-ratio: 1;
      // background-color: pink;


      .my-swipe {
        .banner-swiper-img {
          width: 100%;
          // aspect-ratio: 1;s
        }


        .custom-indicator {
          background-color: #999999;
          position: absolute;
          right: 10px;
          bottom: 10px;
          padding: 5px 10px;
          border-radius: 15px;
          font-size: 13px;
        }

      }


    }

    .price-row {
      display: flex;
      padding: 0px 10px;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10px;

      .price-row-min {
        color: red;
        font-size: 15px;
        margin-right: 5px;
      }

      .price-row-max {
        color: #999999;
        font-size: 13px;
        text-decoration: line-through;
      }

      .price-row-count {
        color: #999999;
        font-size: 14px;
      }
    }

    .name {
      padding: 0px 10px;
      font-size: 15px;
      color: #202020;
      margin-top: 10px;
    }

    .comment {
      margin-top: 10px;
      padding: 0 10px;

      .omment-title {
        color: #202020;
        font-size: 15px;
        font-weight: bold;
      }

      .comment-item {

        display: flex;
        flex-direction: row;
        padding: 10px;
        justify-content: start;

        .head-img {
          width: 50px;
          height: 50px;
          // aspect-ratio: 50px;
        }

        .item-right {
          flex: 1;
          margin-left: 10px;

          .comment-name {
            font-size: 15px;
            color: pink;
            font-weight: bold;
          }

          .content {
            margin: 5px 0px;
            font-size: 13px;
            color: #202020;
          }

          .time {
            width: 100%;
            text-align: right;
            font-size: 13px;
            color: #999999;
          }
        }



      }
    }

    .html-content {

      width: 100%;
      overflow: scroll;

      ::v-deep img {
        display: block;
        width: 100% !important;
      }
    }




  }


  .bottom-menu {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 50px;

    border-top: #eee 1px solid;
    background-color: white;
    z-index: 1000;

    display: flex;
    flex-direction: row;
    align-items: center;

    .menu-item {

      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-grow: 2px;
      align-items: center;

      width: 50px;
      color: #202020;
      font-size: 13px;
      text-align: center;

      img {
        width: 20px;
        aspect-ratio: 1;
      }


    }

    .add {
      flex: 1;
      height: 36px;
      margin-right: 10px;
      background-color: orange;
      border-radius: 18px;
      line-height: 36px;
      text-align: center;
      color: white;
    }

    .buy {

      flex: 1;
      height: 36px;
      line-height: 36px;
      margin-right: 2px;
      background-color: orangered;
      border-radius: 18px;
      text-align: center;
      color: white;
    }

    .sale-out {

      flex: 1;
      height: 36px;
      line-height: 36px;
      margin: 0 10px;
      text-align: center;
      background-color: #999999;
      border-radius: 18px;
      color: white;

    }

  }


}
</style>